<script setup lang="ts">
import { ref } from "vue";
import {
  User
} from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
defineOptions({
  name: "Profile"
});
// 响应式数据
const nickname = ref('小豆黑白')
const introduction = ref('')

// 方法
const updateProfile = () => {
  ElMessage.success('基本信息更新成功！')
}
</script>

<template>
         <div class="space-y-6">
            <div class="flex items-center justify-between">
              <h2 class="text-2xl font-bold">个人资料</h2>
              <div class="bg-yellow-100 text-yellow-800 px-3 py-1 rounded-full text-sm">
                暂未开放头像上传
              </div>
            </div>
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
              <div class="space-y-4">
                <div>
                  <label class="block text-sm font-medium mb-2">昵称</label>
                  <el-input
                    v-model="nickname"
                    placeholder="小豆黑白"
                  />
                </div>
                <div>
                  <label class="block text-sm font-medium mb-2">个人简介</label>
                  <el-input
                    v-model="introduction"
                    type="textarea"
                    placeholder="介绍一下你自己..."
                    :rows="4"
                    maxlength="200"
                    show-word-limit
                  />
                </div>
                <div class="text-sm text-gray-600">
                  个人简介链接:
                  <span class="text-blue-600">FpJ5DJ</span>
                  <span class="text-gray-400 ml-2">需请好友关注可获得更多</span>
                </div>
                <el-button type="primary" @click="updateProfile">
                  更新基本信息
                </el-button>
              </div>
              <div class="flex justify-center">
                <div class="w-64 h-64 bg-gradient-to-br from-blue-100 to-purple-100 rounded-lg flex items-center justify-center">
                  <div class="text-center text-gray-500">
                    <div class="w-24 h-24 bg-white rounded-full mx-auto mb-4 flex items-center justify-center">
                      <el-icon :size="48" color="#9CA3AF">
                        <User />
                      </el-icon>
                    </div>
                    <p>头像预览区域</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
</template>
<style scoped>
.userinfo-page {
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  padding-left: 24px;
  padding-right: 24px;
  box-sizing: border-box;
}

.flex {
  display: flex;
}

.gap-6 {
  gap: 1.5rem;
}

.left-panel {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.userinfo-card {
  width: 260px;
  border-radius: 18px;
  box-shadow: 0 2px 16px 0 rgb(64 112 244 / 8%);
  border: none;
  padding: 32px 16px 24px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.menu-card {
  width: 260px;
  border-radius: 18px;
  box-shadow: 0 2px 16px 0 rgb(64 112 244 / 8%);
  border: none;
  padding: 24px 0 24px 0;
  min-height: 300px;
}

.content-card {
  border-radius: 18px;
  box-shadow: 0 2px 16px 0 rgb(64 112 244 / 8%);
  border: none;
  padding: 32px 32px 24px 32px;
  min-height: 500px;
  background: #fff;
  display: flex;
  flex-direction: column;
  /* justify-content: center; */
}

@media (max-width: 1200px) {
  .userinfo-page {
    padding-left: 8px;
    padding-right: 8px;
  }
  .gap-6 {
    gap: 1rem;
  }
  .userinfo-card, .menu-card {
    width: 200px;
    padding: 24px 8px 16px 8px;
  }
  .content-card {
    padding: 16px 8px 16px 8px;
  }
}

@media (max-width: 900px) {
  .flex {
    flex-direction: column;
    align-items: stretch;
  }
  .left-panel, .userinfo-card, .menu-card, .content-card {
    width: 100% !important;
    min-width: 0;
    margin-bottom: 16px;
  }
  .gap-6 {
    gap: 0;
  }
  .left-panel {
    flex-direction: column;
    gap: 0.5rem;
  }
}

.space-y-1 > * + * {
  margin-top: 0.25rem;
}

.space-y-4 > * + * {
  margin-top: 1rem;
}

.space-y-6 > * + * {
  margin-top: 1.5rem;
}

.placeholder-container {
  @apply flex items-center justify-center h-96 bg-gray-50 rounded-lg border-2 border-dashed border-gray-300;
}

.placeholder-content {
  @apply text-center;
}
</style>